<!--
 * @FileDescription 工单
 * @Author lz
 * @Date 20230526 15:05:37
 * @LastEditors lz
 * @LastEditTime 20230526 15:05:37
-->
<template>
  <div class="Dia_wp">
    <div class="Popup">
      <div class="titBox">
        评分表
        <close-outlined class="cancel" @click="handleOk" />
      </div>
      <div class="package_box">
        <div class="contentBox">
          <div class="title_box">
            现场评分表
            <img
              src="/images/ic_up_small.png"
              class="retract_img"
              @click="retract"
              v-if="state.retract"
            />
            <img
              src="/images/ic_down_small.png"
              class="retract_img"
              @click="retract"
              v-else
            />
          </div>
          <div class="BasicInformation" v-show="state.retract">
            <div class="Basi_unit BOR BN">
              <span class="unit_tit">选手参赛号</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">裁判签字</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">裁判长审判</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR BN">
              <span class="unit_tit">统分裁判签字</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">裁判签字</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">监督仲裁签字</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR BN">
              <span class="unit_tit">车辆信息登记</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">比赛时长</span>
              <input type="text" class="unit_inp" />
            </div>
            <div class="Basi_unit BOR">
              <span class="unit_tit">实际用时</span>
              <input type="text" class="unit_inp" />
            </div>
          </div>
          <div class="Form_box">
            <div class="tit_box">
              <div class="form_tit BOR T1 BN">序号</div>
              <div class="form_tit BOR T2">项目</div>
              <div class="form_tit BOR T3">评分点</div>
              <div class="form_tit BOR T4">说明</div>
              <div class="form_tit BOR T5">配分</div>
              <div class="form_tit BOR T6">得分</div>
            </div>
            <div class="form_content">
              <div class="form_content_unit fcut1">
                <div class="form_content_unit_tit T1 BOR BN">
                  <span class="content_unit_tit">
                    {{ HomeContent.Default.WorksheetData.value[0].Serial }}
                  </span>
                </div>
                <div class="partition T2 BOR">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Project }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[0].Name }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR rp2">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[1].Name }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR rp3">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[2].Name }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR rp4">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[3].Name }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR rp5">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[4].Name }}
                  </span>
                </div>
                <div class="RatingPoints T3 BOR rp6">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[5].Name }}
                  </span>
                </div>
                <div class="unit_list_box T4 rp1 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[0].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 rp2 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[1].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 rp3 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[2].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 rp4 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[3].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 rp5 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[4].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 rp6 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[0]
                      .Points[5].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="allocation T5 BOR rp1">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[0].Score }}
                  </span>
                </div>
                <div class="allocation T5 BOR rp2">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[1].Score }}
                  </span>
                </div>
                <div class="allocation T5 BOR rp3">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[2].Score }}
                  </span>
                </div>
                <div class="allocation T5 BOR rp4">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[3].Score }}
                  </span>
                </div>
                <div class="allocation T5 BOR rp5">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[4].Score }}
                  </span>
                </div>
                <div class="allocation T5 BOR rp6">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[5].Score }}
                  </span>
                </div>
                <div class="score T6 BOR rp1">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[0].Share }}
                  </span>
                </div>
                <div class="score T6 BOR rp2">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[1].Share }}
                  </span>
                </div>
                <div class="score T6 BOR rp3">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[2].Share }}
                  </span>
                </div>
                <div class="score T6 BOR rp4">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[3].Share }}
                  </span>
                </div>
                <div class="score T6 BOR rp5">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[4].Share }}
                  </span>
                </div>
                <div class="score T6 BOR rp6">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[0].Points[5].Share }}
                  </span>
                </div>
              </div>
              <div class="form_content_unit fcut2">
                <div class="form_content_unit_tit T1 BOR BN">
                  <span class="content_unit_tit">
                    {{ HomeContent.Default.WorksheetData.value[1].Serial }}
                  </span>
                </div>
                <div class="partition T2 BOR">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Project }}
                  </span>
                </div>
                <div class="B3RP T3 BOR">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[0].Name }}
                  </span>
                </div>
                <div class="B3RP T3 BOR Brp2">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[1].Name }}
                  </span>
                </div>
                <div class="B3RP T3 BOR Brp3">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[2].Name }}
                  </span>
                </div>
                <div class="B3RP T3 BOR Brp4">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[3].Name }}
                  </span>
                </div>
                <div class="B3RP T3 BOR Brp5">
                  <span class="parameter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[4].Name }}
                  </span>
                </div>
                <div class="unit_list_box T4 Brp1 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[1]
                      .Points[0].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 Brp2 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[1]
                      .Points[1].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 Brp3 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[1]
                      .Points[2].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 Brp4 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[1]
                      .Points[3].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="unit_list_box T4 Brp5 BOL">
                  <div
                    class="form_content_unit_list"
                    v-for="(item, index) in HomeContent.Default.WorksheetData.value[1]
                      .Points[4].Items"
                    :key="index"
                  >
                    <a-checkbox :v-model:checked="item.Result">{{
                      item.Name
                    }}</a-checkbox>
                  </div>
                </div>
                <div class="allocation T5 BOR Brp1">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[0].Share }}
                  </span>
                </div>
                <div class="allocation T5 BOR Brp2">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[1].Share }}
                  </span>
                </div>
                <div class="allocation T5 BOR Brp3">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[2].Share }}
                  </span>
                </div>
                <div class="allocation T5 BOR Brp4">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[3].Share }}
                  </span>
                </div>
                <div class="allocation T5 BOR Brp5">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[4].Share }}
                  </span>
                </div>
                <div class="score T6 BOR Brp1">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[0].Score }}
                  </span>
                </div>
                <div class="score T6 BOR Brp2">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[1].Score }}
                  </span>
                </div>
                <div class="score T6 BOR Brp3">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[2].Score }}
                  </span>
                </div>
                <div class="score T6 BOR Brp4">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[3].Score }}
                  </span>
                </div>
                <div class="score T6 BOR Brp5">
                  <span class="parameter verticalCenter">
                    {{ HomeContent.Default.WorksheetData.value[1].Points[4].Score }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from "@ant-design/icons-vue";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
} from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const sea_inp = ref<string>("");

const state = reactive({
  retract: true,
  current: 2,
  visible: false,
  ListTypes: 0,
  values: <any>[],
});

const handleOk = async () => {
  HomeContent.Default.EvaluateShow.value = false;
};

//收起
function retract() {
  state.retract = !state.retract;
}

onMounted(async () => {
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_RATINGFORM_GET
    )
  );
  console.log(JSON.parse(newArr.Content).Result);
  HomeContent.Default.WorksheetData.value = JSON.parse(
    newArr.Content
  ).Result.RatingFormGroupModels;
  console.log(
    "HomeContent.Default.WorksheetData.value111111: ",
    HomeContent.Default.WorksheetData.value
  );
});
</script>

<style scoped>
.Dia_wp {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.1);
  position: relative;
}

.Popup {
  width: 1440px;
  height: 880px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
}

.titBox {
  height: 54px;
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
  margin-top: 30px;
  margin-left: 40px;
}

.cancel {
  font-size: 28px;
  font-weight: 600;
  float: right;
  margin-top: 4px;
  margin-right: 30px;
}

.contentBox {
  border: 1px solid #e8ecf4;
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.form_content_unit {
  width: 100%;
  min-height: 64px;
  position: relative;
}

.title_box {
  height: 62px;
  line-height: 62px;
  font-size: 20px;
  font-weight: 600;
  padding-left: 10px;
  color: #000;
}

.retract_img {
  float: right;
  width: 24px;
  margin-top: 16px;
  margin-right: 16px;
}

.BasicInformation {
  width: 100%;
  height: 168px;
}

.Basi_unit {
  float: left;
  width: 33.333%;
  height: 56px;
}

.BOR {
  border-top: 1px solid #e8ecf4;
  border-left: 1px solid #e8ecf4;
}

.BOL {
  border-left: 1px solid #e8ecf4;
}

.BOB {
  border-bottom: 1px solid #e8ecf4;
}

.BN {
  border-left: none;
}

.unit_tit {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 56px;
  padding-left: 16px;
  font-weight: 600;
}

.unit_inp {
  width: 300px;
  height: 56px;
  outline: none;
  font-size: 16px;
  border: none;
  float: right;
  margin-right: 16px;
}

.package_box {
  overflow-y: auto;
  height: 760px;
  padding-right: 20px;
  margin: 0 40px;
  margin-top: 20px;
  color: #000;
}

.package_box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.package_box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;
  background: #dfe1e8;
}

.package_box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  border-radius: 10px;
  background: #f8f8f8;
}

.Form_box {
  width: 100%;
}

.tit_box {
  width: 100%;
  height: 42px;
  background-color: #f7f8fb;
}

.form_tit {
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.score {
  position: absolute;
  top: 0;
  right: 0%;
  bottom: 0;
}

.T1 {
  width: 6%;
}

.T2 {
  width: 20%;
}

.T3 {
  width: 18%;
}

.T3s {
  width: 71%;
}

.T3ss {
  width: 10%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.T4 {
  width: 40%;
}

.T5 {
  width: 8%;
}

.T6 {
  width: 8%;
}

.form_content_unit_tit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content_unit_tit {
  font-size: 16px;
  font-weight: 400;
  color: #202020;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.partition {
  position: absolute;
  top: 0;
  left: 6%;
  bottom: 0;
}

.RatingPoints {
  position: absolute;
  top: 0;
  left: 26%;
  bottom: 0;
  height: 352px;
}

.B3RP {
  position: absolute;
  top: 0;
  left: 26%;
  bottom: 0;
  height: 72px;
}

.allocation {
  position: absolute;
  top: 0;
  right: 8%;
  bottom: 0;
}

.rp1 {
  height: 352px;
}

.rp2 {
  top: 352px;
  height: 320px;
}

.rp3 {
  top: 672px;
  height: 240px;
}

.rp4 {
  top: 912px;
  height: 200px;
}

.rp5 {
  top: 1112px;
  height: 176px;
}

.rp6 {
  top: 1288px;
  height: 176px;
}

.Brp1 {
  height: 72px;
}

.Brp2 {
  height: 72px;
  top: 72px;
}

.Brp3 {
  height: 72px;
  top: 144px;
}

.Brp4 {
  height: 72px;
  top: 216px;
}

.Brp5 {
  top: 288px;
  height: 112px;
}

.parameter {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate(0%, -50%);
}

.unit_list_box {
  position: absolute;
  left: 0;
  margin-left: 44%;
}

.form_content_unit_list {
  width: 100%;
  float: left;
  height: 40px;
  line-height: 16px;
  padding-left: 16px;
  padding-top: 20px;
}

.form_content_unit_list:nth-child(1) {
  border-top: 1px solid #e8ecf4;
}

.fcut1 {
  height: 1464px;
}

.fcut2 {
  height: 400px;
}

.verticalCenter {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
